<template>
  <div class="userlist-wrap">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="t.tab_name" :name="i+''" v-for="(t, i) in setData" :key="i">
        <div v-for="(item, index) in t.list" :key="item.id">
          <!--<el-input style="margin-bottom: 10px" :type="item.type" :rows="14" placeholder="请输入内容" v-model="item.content"></el-input>-->
        </div>
      </el-tab-pane>
    </el-tabs>

    <editor ref="editorComponent" @textChange="getMsgFormSon"></editor>
    <el-button :loading="loading" :disabled="loading" @click="onSubmit" type="primary">修改</el-button>
  </div>
</template>
<script>
  import editor from './Quilleditor'
  export default {
    name: 'systemSet_start',
    data() {
      return {
        loading: false,
        setData: [],
        activeName: '0',
      }
    },
    components: {
      editor
    },
    created() {
      this.$http.get('api/admin/system').then(r =>{
        this.setData = r.data.data
        this.$nextTick(()=>{
          this.$refs.editorComponent.value = this.setData[+this.activeName].list[0].content
        })
      })
    },
    methods: {
      getMsgFormSon(data){
        this.setData[+this.activeName].list[0].content = data
      },
      handleClick(id) {
        this.$refs.editorComponent.value = this.setData[+this.activeName].list[0].content
      },
      onSubmit(item) {
        this.loading = true
        this.$http.put('api/admin/system/System/' + this.setData[+this.activeName].list[0].id, {
          content: this.setData[+this.activeName].list[0].content
        }).then(r =>{
          this.loading = false
          this.$message({
            type: 'success',
            message: this.setData[+this.activeName].list[0].tab_name + '修改完成...'
          });
        }).catch(()=>{
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .userlist-wrap{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 30px 30px 90px;
    box-sizing: border-box;
  }

</style>
